<script setup>
import { ref,reactive,toRefs,inject,onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useItem } from '../../../../store/index.js'

const useItemer = useItem()
const props = defineProps({
  volumeConfig: {
    type: Object,
    default: {}
  },
  method: {
    type: String,
    default: 'Create'
  }
})
onMounted(() => {
  if (props.method != 'Create') {
    data.newVolumeConfig = props.volumeConfig
  }
})
const data = reactive({
  newVolumeConfig: {
    name: '',
    hostPath: {
      type: '',
      path: ''
    }
  },
  mountTypeList: [
    {
      label: "不检查(默认值)",
      value: ""
    },
    {
      label: '目录类型:如果给定路径不存在，将根据需要在那里创建一个空目录，权限设置为755，与Kubelet具有相同的组和所有权',
      value: 'DirectoryOrCreate'
    },
    {
      label: '目录类型:给定的目录路径必须存在，否则无法挂载',
      value: 'Directory'
    },
    {
      label: '文件类型:不存在则创建',
      value: 'FileOrCreate'
    },
    {
      label: '文件类型:给定路径上必须存在对应文件，否则无法挂载',
      value: 'File'
    },
    {
      label: '套接字类型:给定路径上必须存在一个UNIX socket',
      value: 'Socket'
    },
    {
      label: '设备类型:给定路径上必须存在字符设备',
      value: 'CharDevice'
    },
    {
      label: '设备类型:给定路径上必须存在块设备',
      value: 'BlockDevice'
    },
  ],
  rules: {
    name: [
      { required: true, message: '请输入volume名称', trigger: 'blur'}
    ],
    'hostPath.path': [
      { required: true, message: '请输入宿主机路径', trigger: 'blur'},
      { pattern: '^(?=/)', message: 'path必须以/开头', trigger: 'blur'}
    ]
  }

})
let formRef = ref()

// 订阅关闭dialog的方法
const closeDialog = inject('closeAddVolumeDialog')

const submit = () => {
  formRef.value.validate((valid) =>{
    if (valid) {
      console.log(data.newVolumeConfig)
      if (useItemer.item.spec.template.spec.volumes == undefined) {
        useItemer.item.spec.template.spec.volumes = []
      }
      for (let i=0;i<useItemer.item.spec.template.spec.volumes.length;i++) {
        if (useItemer.item.spec.template.spec.volumes[i].name == data.newVolumeConfig.name) {
          // 已经存在相同名字的volume名称
          ElMessage.error('volume不能重复')
          return
        }
      }
      const newVolume = JSON.parse(JSON.stringify(data.newVolumeConfig))

      useItemer.item.spec.template.spec.volumes.push(newVolume)
      console.log(useItemer.item.spec.template.spec.volumes)
      closeDialog()
    }else {
      ElMessage.warning('请完善表单数据')
    }
  })
}
const { newVolumeConfig,mountTypeList,rules } = toRefs(data)
</script>

<template>
  <el-form :model="newVolumeConfig" ref="formRef" :rules="rules">
    <el-row :gutter="5">
      <el-col :span="8" v-if="props.method=='Create'">
          <el-form-item label="volume名称" prop="name" required>
              <el-input v-model.trim="newVolumeConfig.name" style="width:180px" placeholder="请输入volume名称"/>
          </el-form-item>
      </el-col>
      <el-col :span="8">
          <el-form-item label="宿主机路径" prop="hostPath.path" required>
              <el-input v-model.trim="newVolumeConfig.hostPath.path" style="width:180px" placeholder="请输入宿主机路径"/>
          </el-form-item>
      </el-col>

        <el-col :span="8">
            <el-form-item label="挂载类型" prop="hostPath.type">
                <el-select v-model="newVolumeConfig.hostPath.type"  placeholder="请选择挂载类型" style="width: 260px;" :empty-values="[null, undefined]">
                    <el-option
                    v-for="s in mountTypeList"
                    :key="s.value"
                    :label="s.label"
                    :value="s.value"
                    />
                </el-select>
            </el-form-item>
        </el-col>
    </el-row>
    <!-- 添加按钮 -->
    <div  v-if="props.method == 'Create'" style="display: flex;">
      <el-button type="primary" @click="submit()" style="margin: 10px auto;">
        添加
      </el-button>
    </div>
  </el-form>
</template>

<style scoped>
</style>
